<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <link rel="icon" href="img/dgs.jpg" type="image/jpg" >
  <link rel="stylesheet" href="../layui/css/layui.css">
  <style>
    body{margin: 0;padding: 0}

    #sidebar{
      top: 50%;
      margin-top: -280px;
      left: 10px;
      position: absolute;
      width: 120px;
      height: 560px;
      text-align: center;
      border-radius: 20px;
      z-index: 1000;
    }

    #userImageDv{
      margin-top: 20px;
      margin-left: 30px;
      width: 60px;
      height: 60px;
    }

    #userDataLayer{
      position: absolute;
      width: 100%;
      height: 100%;
    }

    #userDataDvTitle{
      margin: 50px auto 0;
      text-align: center;
      font-size: 3em;
    }

    #userDataDv{
      background-color: white;
      position: relative;
      width: 70%;
      height: 40%;
      margin: 150px auto 0;
      padding-top: 50px;
    }

    .userData{
      width: 500px;
      height: 400px;
    }




    #userRecordsLayer{
      position: absolute;
      width: 100%;
      height: 100%;
      display: none;
    }

    #userRecordsTitle{
      margin: 50px auto 0;
      text-align: center;
      font-size: 3em;
    }

    #userRecordsSearchDv{
      width: 700px;
      height: 50px;
      margin: 40px auto 0;
    }

    #userListTableDv{
      background: white;
      width: 725px;
      height: 630px;
      margin: 0 auto;
    }



    #userInformationLayer{
      position: absolute;
      width: 100%;
      height: 100%;
      display: none;
    }
    #userInformationDv{
      border-radius: 60px;
      position: relative;
      margin: 200px auto 0;
      width: 600px;
      height: 500px;
      background: #f4f5f7;
    }
    #userInformationDvHead{
      margin: 20px auto 0;
      padding-top: 20px;
      width: 200px;
      height: 50px;
      text-align: center;
    }
    #info{
      width: 600px;
      height: 180px;
      margin: 30px auto 0;
    }
    #changesDv{
      width: 600px;
      height: 120px;
      margin: 0 auto;
    }
    .duInput{
      position: relative;
      width: 50%;
      font-size:14px;
      height:40px;
      border-radius:5px;
      border:1px solid #4abbd8;
      color:black;
      outline:0;
      text-align:left;
      padding-left: 10px;
      display:block;
    }
    #verifyPhone{
      z-index: 10;
      background-color: #d7ab7a;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -400px;
      margin-top: -200px;
      width: 800px;
      height: 400px;
      display: none;
    }
    #verifyNewPhone{
      background-color: white;
      z-index: 20;
      float: left;
      left: 50%;
      margin-top: 60px;
      margin-left: -400px;
      position: absolute;
      width: 800px;
      height: 400px;
      display: none;
    }
    #changePasswordDv{
      background-color: #d7ab7a;
      z-index: 30;
      float: left;
      left: 50%;
      top: 50%;
      margin-top: -250px;
      margin-left: -400px;
      position: absolute;
      width: 800px;
      height: 500px;
      display: none;
    }
    .changeButton{
      cursor: pointer;
      position: relative;
      border-radius:20px;
      height: 42px;
      width: 120px;
      color: white;
      background-color: #00a7de;
    }
    .duForm{
      width: 500px;
      height: 130px;
      float: left;
    }
    .sex{
      margin-left: 250px;
      width: 300px;
      height: 40px;
    }
    .address{
      margin-left:120px;
      margin-top: 20px;
      width: 400px;
      height: 40px;
    }
    input::-webkit-input-placeholder{
      color: #4abbd8;
      font-size: 14px;
    }
    #determineChangeDv{
      position: absolute;
      width: 150px;
      height: 35px;
      left: 50%;
      margin-left: -75px;
      margin-top: 200px;
    }
    .determineChange{
      position: absolute;
      border-radius:20px;
      width: 150px;
      height: 35px;
      background-color: #00a7de;
      color: white;
      cursor: pointer;
    }
    .changeButtonDv{
      width: 120px;
      position: absolute;
      float: left;
      margin-left: 80px;
      margin-top: 100px;
    }


    #battleRecordLayer{
      position: absolute;
      width: 100%;
      height: 100%;
      display: none;
    }

    #battleRecordTitle{
      margin: 50px auto 0;
      text-align: center;
      font-size: 3em;
    }

    #battleSearchDv{
      width: 600px;
      height: 50px;
      margin: 40px auto 0;
    }

    #battleRecordTableDv{
      background: white;
      width: 720px;
      height: 605px;
      margin: -10px auto 0;
    }

    button{
      outline: none;
      border: none;
    }
    button:hover {
      background-color:#3eb5de;
    }



    body{
      background: url("/img/个人中心.jpg");
      background-size:cover;
    }

  </style>
</head>
<body>

<div id="sidebar" class="layui-nav layui-nav-tree layui-inline">
  <div id="userImageDv">
    <img id="userImage" src="" alt="" width="60px" height="60px" style="border-radius: 100%">
  </div>
  <li id="item1" class="layui-nav-item  layui-this"><a style="margin-top:40px;font-size:120%;cursor:pointer" onclick="userDataLayerShow()">个人数据</a> </li>
  <li id="item2" class="layui-nav-item"><a style="margin-top:40px;font-size:120%;cursor:pointer" onclick="userRecordsLayerShow()">消费记录</a></li>
  <li id="item3" class="layui-nav-item"><a style="margin-top:40px;font-size:120%;cursor:pointer" onclick="battleRecordLayerShow()">对战记录</a></li>
  <li id="item4" class="layui-nav-item"><a style="margin-top:40px;font-size:120%;cursor:pointer" onclick="userInformationLayerShow()">个人信息</a></li>
  <li class="layui-nav-item"><a style="margin-top:40px;font-size:120%;cursor:pointer;color: #5ea1e8" onclick="leaveUserCenter()">返回主页</a></li>
</div>


<div id="userDataLayer">
  <div id="userDataDvTitle">
    <b>用&nbsp;&nbsp;户&nbsp;&nbsp;数&nbsp;&nbsp;据</b>
  </div>
  <div id="userDataDv">
    <div id="userData1Dv" style="position: absolute;float: left;margin-left: 150px">
      <div id="userData1" class="userData"></div>
    </div>
    <div id="userData2Dv" style="position: absolute;float: left;margin-left: 750px">
      <div id="userData2" class="userData"></div>
    </div>
  </div>

</div>

<div id="userRecordsLayer">
  <div id="userRecordsTitle">
    <b>消&nbsp;&nbsp;费&nbsp;&nbsp;记&nbsp;&nbsp;录</b>
  </div>
  <div id="userRecordsSearchDv">
    <div class="layui-inline" style="margin-left: -35px">
      <input class="layui-input" name="keyword" id="userRecordsSearch" autocomplete="off" placeholder="输入购买物品名关键字">
    </div>
    <button class="layui-btn"  type="button" id="userRecordsBtn" onclick="userRecordsBtn()">搜索</button>
  </div>
  <div id="userListTableDv">
    <table class="layui-hide" id="userListTable" lay-filter="userListTable"></table>
  </div>

</div>


<div id="userInformationLayer">
  <div id="userInformationDv">
    <div id="userInformationDvHead"><b style="font-size: 2.5em">个&nbsp;人&nbsp;信&nbsp;息</b></div>
    <div id="info">
      <div id="nameDv">
        <i style="float:left;margin:5px 0 20px 22%;font-size: 2em" class="layui-icon layui-icon-username"></i>
        <input id="name"  style="margin: 0 0 20px 10px;float: left" class="duInput" lay-verify="required" autocomplete="off" placeholder="昵称" disabled="disabled">
      </div>

      <form class="layui-form duForm" action="" lay-filter="data">
        <div class="layui-input-block sex">
          <input id="nanInput" type="radio" name="sex" value="nan" title="男" style="margin-left: 100px">
          <input id="nvInput" type="radio" name="sex" value="nv" title="女">
        </div>


        <div class="layui-form-item address" style="padding-right: 55px;">
          <i style="float:left;margin:5px 0 0 10px;font-size: 2em" class="layui-icon layui-icon-location"></i>
          <div class="layui-input-inline" style="border: 1px solid #4abbd8;width: 9.5em !important;float: left;margin-left:10px">
            <select required name="province" id="province" lay-filter="province">
              <option value="">选择省份</option>
            </select>
          </div>
          <div class="layui-input-inline" style="border: 1px solid #4abbd8;width: 12em !important;float: left">
            <select required name="city" id="city">
              <option value="">请先选择省份</option>
            </select>
          </div>
        </div>
      </form>
      <div id="determineChangeDv">
        <button id="determineChange" class="determineChange" style="font-size: 1.2em">确&nbsp;&nbsp;认&nbsp;&nbsp;修&nbsp;&nbsp;改</button>
      </div>
    </div>
    <div id="changesDv">
      <div class="changeButtonDv">
        <button class="changeButton" id="changePhoneButton">更改电话号码</button>
      </div>

      <div class="changeButtonDv" style="margin-left: 410px">
        <button class="changeButton" id="changePasswordButton">更改密码</button>
      </div>
    </div>
  </div>


  <div id="verifyPhone">
    <div style="width: 300px;padding-top: 50px;margin-left: 250px;text-align: center">
      <b style="font-size: 2em">验证原电话号码</b>
    </div>
    <div style="width: 500px;margin-left: 200px;margin-top: 30px">
      <div style="float: left;padding-top: 5px">
        <b style="font-size: 1.5em">需验证电话号码:</b>
      </div>
      <input id="phone" value="" style="margin:0 0 30px 10px;float: left" class="duInput" disabled="disabled">
    </div>
    <div style="width: 300px;margin-left: 285px">
      <div style="float: left;padding-top: 5px;text-align: center">
        <b style="font-size: 1.5em">验证码:</b>
      </div>
      <input id="yzm" style="margin:0 0 0 10px;width: 160px;float: left" class="duInput" lay-verify="required" autocomplete="off" placeholder="验证码">
    </div>
    <div style="float: left;width:120px;height: 50px;"><button id="SendYzm" class="changeButton">发送验证码</button></div>
    <div style="float: left;margin-left: 270px;margin-top: 30px;width:120px;height: 50px;"><button id="verifyPhoneSubmit" class="changeButton">提交</button></div>
    <div style="float: left;margin-left: 40px;margin-top: 30px;width:120px;height: 50px;"><button id="verifyPhoneCancel" class="changeButton">取消</button></div>
  </div>


  <div id="verifyNewPhone">
    <div style="width: 300px;margin-left: 250px;text-align: center">
      <b style="font-size: 2em">验证新电话号码</b>
    </div>
    <div style="width: 500px;margin-left: 200px;margin-top: 30px">
      <div style="float: left;padding-top: 5px">
        <b style="font-size: 1.5em">绑定新电话号码:</b>
      </div>
      <input id="newPhone" value="" style="margin:0 0 30px 10px;float: left" class="duInput">
    </div>
    <div style="width: 300px;margin-left: 285px">
      <div style="float: left;padding-top: 5px;text-align: center">
        <b style="font-size: 1.5em">验证码:</b>
      </div>
      <input id="newPhoneYzm" style="margin:0 0 0 10px;width: 160px;float: left" class="duInput" lay-verify="required" autocomplete="off" placeholder="验证码">
    </div>
    <div style="float: left;width:120px;height: 50px;"><button id="SendNewYzm" class="changeButton">发送验证码</button></div>
    <div style="float: left;margin-left: 340px;margin-top: 30px;width:120px;height: 50px;"><button id="verifyNewPhoneSubmit" class="changeButton">提交</button></div>
    <div style="float: left;margin-left: 40px;margin-top: 30px;width:120px;height: 50px;">
      <button id="verifyNewPhoneCancel" class="changeButton">取消</button>
    </div>
  </div>

  <div id="changePasswordDv">
    <div style="width: 100px;margin-right: 20px;float: right;text-align: right">
      <a id="changePasswordCancel" style="cursor: pointer;color: white;font-size: 2em">取消</a>
    </div>
    <div style="width: 200px;margin: 20px 0 50px 300px;text-align: center"><b style="color: white;font-size: 2em">修改密码</b></div>

    <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
    <input id="beforePassword" type="password" style="margin: 0 0 50px 22%" class="duInput" autocomplete="off" placeholder="输入原密码">

    <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
    <input id="determinePassword1" type="password" style="margin: 0 0 50px 22%" class="duInput" autocomplete="off" placeholder="输入新密码">

    <i style="float:left;margin:5px 10px 30px 22%;font-size: 2em" class="layui-icon layui-icon-password"></i>
    <input id="determinePassword2" type="password" style="margin: 0 0 50px 22%" class="duInput" autocomplete="off" placeholder="确定新密码">

    <div style="margin-left: 300px;width: 200px">
      <button id="submitPassword" class="changeButton" style="width: 200px;background-color: white;color:black">确认更改</button>
    </div>
  </div>
</div>

<div id="battleRecordLayer">
  <div id="battleRecordTitle">
    <b>对&nbsp;&nbsp;战&nbsp;&nbsp;记&nbsp;&nbsp;录</b>
  </div>
  <div id="battleSearchDv">
    <div class="layui-inline" style="margin-left: -35px">
      <input class="layui-input" name="keyword" id="battleSearch" autocomplete="off" placeholder="输入对手名字关键字">
    </div>
    <button class="layui-btn"  type="button" id="btn" onclick="BSearchBtn()">搜索</button>
  </div>
  <div id="battleRecordTableDv">
    <table class="layui-hide" id="battleRecordTable" lay-filter="battleRecordTable"></table>
  </div>
</div>
<style type="text/css">
  .layui-table-cell{
    text-align:center;
    height: 400px;
    white-space: normal;
  }
  .layui-table img{
    max-width:400px
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<script src="/js/addressSelect.js" charset="utf-8"></script>
<script src="/js/echarts.js"></script>
<script>
  var myChart1 = echarts.init(document.getElementById('userData1'));
  var myChart2 = echarts.init(document.getElementById('userData2'));
  var tele=0,newTele='',DateForm1=[0,0,0],DateForm2=[0,0,0],enemyName='',NeedResult='';

  userDataLayerShow();
  theOpen();
  layuiLoad();



  for (var i = 0; i < addressSelect.length; i++) {
    $("#province").append("<option value='" + i + "'>" + addressSelect[i].name + "</option>");
  }


  function layuiLoad() {
    layui.use(['layer', 'form','table'], function() {
      var form = layui.form;
      table = layui.table

      form.on('select(province)', function(data) {
        if (data.value.length < 0) return false;
        $("#city").empty();
        for (var i = 0; i < addressSelect[data.value].city.length; i++) {
          $("#city").append("<option value='" + i + "'>" + addressSelect[data.value].city[i].name +
                  "</option>");
        }
        form.render('select');
      });

      form.on('radio(filter)', function(data){
        console.log(data.elem); //得到radio原始DOM对象
        console.log(data.value); //被点击的radio的value值
      });

      $.ajax({
        url: '/user/getUserInfoById/'+sessionStorage.getItem('userId'),
        method: 'GET',
        contentType: 'application/json',
        success: function(res) {
          $('#userImage').attr('src','http://localhost:8088/'+res.data.userImage)
          $('#name').val(res.data.username)
          if (res.data.sex==='男'){
            $("#nanInput").attr("checked");
          }
          else if (res.data.sex==='女'){
            $("#nvInput").attr("checked");
          }
          tele=res.data.telephone;
          $("#phone").val(tele)
        }
      })


      table.render({
        elem: '#userListTable',
        height: 600,
        width: 720,
        method: 'POST',
        contentType: "application/json",
        url:'/exchange-list/list'
        ,limit:100
        ,loading:true
        ,skin: 'line'
        ,even: true
        ,size: 'lg'
        ,request: {
          pageName: 'displayStart'
          , limitName: 'displayLength'
        },
        response: {
          statusCode: 200
        }
        ,where: {
          userId: sessionStorage.getItem('userId')
        }
        ,parseData: function (res) {
          return {
            "code": res.code,
            "msg": res.msg,
            "count": res.count,
            "data": res.data.records
          }

        },
        cols: [[
          {field: 'goodsId',hide:true},
          {
            field: 'goodsImage', title: '商品图片', width: 200, height: 200, templet: function (data) {
              return '<div><img  src="http://127.0.0.1:8088/' + data.goodsImage + '" ' + 'alt="" width="150px" height="150px" ></div>';
            }},
          {field: 'goodsName', title: '商品名称', width: 150, align: 'center'},
          {field: 'price', title: '商品价格', width: 150, align: 'center'},
          {field: 'createTime', title: '消费时间', width: 200, sort: true, align: 'center'}
        ]],
        done:function () {
          $('.layui-table-cell').css({'height':'auto'});
        }
      });

      table.render({
        elem: '#battleRecordTable',
        height: 600,
        width:720,
        method: 'POST',
        contentType: "application/json",
        url:'/pvp-info/listOfUser',
        page: true
        ,limit:50
        ,loading:true
        ,skin: 'line'
        ,even: true
        ,size: 'lg'
        ,request: {
          pageName: 'displayStart'
          , limitName: 'displayLength'
        },
        response: {
          statusCode: 200
        }
        ,where: {
          userId: sessionStorage.getItem('userId'),
          enemy:enemyName,
        }
        ,parseData: function (res) {
          return {
            "code": res.code,
            "msg": res.msg,
            "count": res.count,
            "data": res.data.records
          }

        },
        cols: [[
          {field: 'enemy', title: '对手', width: 90,align: 'center'},
          {field: 'result', title: '比赛结果', width: 150, align: 'center'},
          {field: 'mypoints', title: '用户得分', width: 130, align: 'center',sort: true},
          {field: 'hispoints', title: '对手得分', width: 120, align: 'center'},
          {field: 'createTime', title: '比赛时间', width: 200, sort: true, align: 'center'}
        ]]
      });
    })
  }




  $('#determineChange').click(function(){
    let data = form.val('data');
    data.username =$('#name').val();
    data.id=sessionStorage.getItem('userId')
    data.city = addressSelect[data.province].city[data.city].name;
    data.province = addressSelect[data.province].name;
    $.ajax({
      url: '/user/updateInfo',
      method: 'POST',
      contentType: 'application/json',
      async: true,
      data: JSON.stringify(data),
      success: function(res) {
        layer.msg(res.msg)
      }
    })
  })

  $('#changePhoneButton').click(function () {
    $('#verifyPhone').css('display','block');
  })

  $('#SendYzm').click(function () {
    $.ajax({
      url: '/user/sendSms/'+tele,
      method: 'GET',
      contentType: 'application/json',
      success: function(res) {
        layer.msg(res.msg)
      }
    })
  })

  $('#verifyPhoneSubmit').click(function () {
    $.ajax({
      url: '/user/isOldTel',
      method: 'POST',
      data:JSON.stringify({
        userId:sessionStorage.getItem('userId'),
        telephone:tele,
        code:$('#yzm').val()
      }),
      contentType: 'application/json',
      success: function(res) {
        layer.msg(res.msg);
        if (res.code==200){
          $('#verifyPhone').css('display','none');
          $('#verifyNewPhone').css('display','block');
        }
        else if (res.code==400){
        }
      }
    })
  })

  $('#verifyPhoneCancel').click(function (){
    $('#verifyPhone').css('display','none');
    $('#yzm').val('')
  })



  $('#SendNewYzm').click(function () {
    newTele=$('#xinphone').val()
    if (newTele==''){
      layer.msg('手机号码为空');
    }
    else {
      $.ajax({
        url: '/user/sendSms/'+newTele,
        method: 'GET',
        contentType: 'application/json',
        success: function(res) {
          layer.msg(res.msg)
        }
      })
    }
  })


  $('#verifyNewPhoneSubmit').click(function () {
    $.ajax({
      url: '/user/updateTel',
      method: 'POST',
      data:JSON.stringify({
        userId:sessionStorage.getItem('userId'),
        telephone:newTele,
        code:$('#newPhoneYzm').val()
      }),
      success: function(res) {
        layer.msg(res.msg);
        if (res.code==200){
          $('#verifyNewPhone').css('display','none');
        }
        else if (res.code==400){
        }
      }
    })
  })




  $('#changePasswordButton').click(function () {
    $('#changePasswordDv').css('display','block');
  })


  $('#submitPassword').click(function () {
    let ps=$('#determinePassword1').val();
    let qdps=$('#determinePassword2').val()
    if (ps===qdps){
      $.ajax({
        url: '/user/changePassword',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          id:sessionStorage.getItem('userId'),
          password: $('#beforePassword').val(),
          newPassword:ps
        }),
        success: function(res) {
          layer.msg(res.msg)
          if (res.code==200){
            $('#changePasswordDv').css('display','none')
          }
        }
      })
    }
    else {layer.msg('两次密码填写不一致')}
  })


  $('#changePasswordCancel').click(function () {
    $('#changePasswordDv').css('display','none');
    $('#beforePassword').val('');
    $('#determinePassword1').val('');
    $('#determinePassword2').val('');
  })

  $('#nameDv').click(function () {
    layer.msg('无法更改昵称，请在背包中使用改名卡进行修改')
  })

  function leaveUserCenter(){
    sessionStorage.setItem('state','')
    location.href='user_index.html'
  }




  function userDataLayerShow(){
    //第一张扇形图数据请求
    $.ajax({
      url: '/errorBook/listMyError/'+sessionStorage.getItem('userId'),
      method: 'GET',
      success: function(res) {
        DateForm1[0]=res.data.pvpNum;
        DateForm1[1]=res.data.pveNum;
        DateForm1[2]=res.data.endlessNum;

        option1 = {
          title: {
            text: '错题数据分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '错题数',
              type: 'pie',
              radius: '70%',
              data: [
                {value: DateForm1[0], name: '闯关模式'},
                {value: DateForm1[1], name: 'pk模式'},
                {value: DateForm1[2], name: '无尽模式'}

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart1.setOption(option1);
      }
    })

    //第二张扇形图数据请求
    $.ajax({
      url: '/payment/listMyAlipay/'+sessionStorage.getItem('userId'),
      method: 'GET',
      success: function(res) {
        DateForm2[0]=res.data.num6;
        DateForm2[1]=res.data.num30;
        DateForm2[2]=res.data.num68;
        DateForm2[3]=res.data.num128;
        DateForm2[4]=res.data.num328;
        DateForm2[5]=res.data.num648;


        option2 = {
          title: {
            text: '各个充值档位的充值次数',
            left:'center'
          },
          xAxis: {
            type: 'category',
            data: ['6', '30', '68','128','328','648']
          },
          yAxis: {
            type: 'value'
          },
          series : [
            {
              name: '积分',
              type:'bar',
              barWidth:50,
              data:[DateForm2[0],DateForm2[1],DateForm2[2],DateForm2[3],DateForm2[4],DateForm2[5]],
              itemStyle: {
                normal: {
                  label: {
                    show: true,		//开启显示
                    position: 'top',	//在上方显示
                    textStyle: {	    //数值样式
                      color: 'black',
                      fontSize: 16
                    }
                  }
                }
              }
            }
          ]
        };

        myChart2.setOption(option2);
      }
    })


    $('#userDataLayer').css('display','block')
    $('#userRecordsLayer').css('display','none')
    $('#userInformationLayer').css('display','none')
    $('#battleRecordLayer').css('display','none')
  }

  function userRecordsLayerShow(){
    $('#userDataLayer').css('display','none')
    $('#userRecordsLayer').css('display','block')
    $('#userInformationLayer').css('display','none')
    $('#battleRecordLayer').css('display','none')
  }

  function userInformationLayerShow(){
    $('#userDataLayer').css('display','none')
    $('#userRecordsLayer').css('display','none')
    $('#userInformationLayer').css('display','block')
    $('#battleRecordLayer').css('display','none')
  }

  function battleRecordLayerShow(){
    $('#userDataLayer').css('display','none')
    $('#userRecordsLayer').css('display','none')
    $('#userInformationLayer').css('display','none')
    $('#battleRecordLayer').css('display','block')
  }




  function theOpen(){
    if (sessionStorage.getItem('state')===''){

    }
    else if (sessionStorage.getItem('state')==='1'){

    }
    else if (sessionStorage.getItem('state')==='2'){
      $('#item1').removeClass("layui-this");
      $('#item2').addClass("layui-this");
      userRecordsLayerShow();
    }
    else if (sessionStorage.getItem('state')==='3'){
      $('#item1').removeClass("layui-this");
      $('#item3').addClass("layui-this");
      battleRecordLayerShow();
    }
    else if (sessionStorage.getItem('state')==='4'){
      $('#item1').removeClass("layui-this");
      $('#item4').addClass("layui-this");
      userInformationLayerShow();
    }
  }

  function BSearchBtn() {
    let BSValue = document.getElementById("battleSearch").value;
    enemyName=BSValue;
    layuiLoad();
  }

  function userRecordsBtn() {
    let URValue = document.getElementById("userRecordsSearch").value;
    enemyName=URValue;
    layuiLoad();
  }

</script>
</body>
</html>